<template>
	<view class="section1 flex-col">
		<view class="leaner"></view>
		<view class="outer1 flex-col">
			<view class="bd1 flex-col">
				<view class="section2 flex-col">
					<image class="SingleAvatar56" referrerpolicy="no-referrer" src="../static/logo@2x.png" />
					<text class="word4">手机号</text>
					<input type="number" v-model="goData.account" placeholder="请输入手机号" class="txt2" />
					<view class="section10 flex-col"></view>
				</view>
			</view>
			<view class="bd1 flex-col">
				<view class="section2 flex-col">
					<text class="word4" style="margin-top: 50rpx;">验证码</text>
					<view class="yanzhengma">
						<input v-model="goData.code" class="yanzhengmaInput txt2" type="number" placeholder="请输入验证码" />
						<view class="code999" v-if="codeKey" @tap="$u.debounce(getCood, 500)">发送验证码</view>
						<view v-else class="codeColor code999">{{codeNum}}后重新获取</view>
					</view>
					<view class="section10 flex-col">

					</view>

				</view>
			</view>
			<view class="bd1 flex-col">
				<view class="section2 flex-col">

					<text class="word4" style="margin-top: 50rpx;">新密码</text>
					<view class="bd4 flex-row justify-between">
						<input @input="inputVerify2" v-model="goData.password" type="text" :password="!see1"
							placeholder="请输入新密码" class="info2" />
						<image class="icon3" src="../static/icon_308@2x.png" @click="see1=false" v-if="see1" />
						<image class="icon3" style="height: 17rpx;width: 37rpx;" src="../static/icon_309@2x.png"
							@click="see1=true" v-else />
					</view>
					<view class="section10 flex-col"></view>

				</view>
			</view>
			<view class="bd1 flex-col">
				<view class="section2 flex-col">
					<text class="word4" style="margin-top: 50rpx;">确认密码</text>
					<view class="bd4 flex-row justify-between">
						<input @input="inputVerify1" type="text" v-model="goData.pass" :password="!see"
							placeholder="请确认密码" class="info2" />
						<image class="icon3" src="../static/icon_308@2x.png" @click="see=false" v-if="see" />
						<image class="icon3" style="height: 17rpx;width: 37rpx;" src="../static/icon_309@2x.png"
							@click="see=true" v-else />
					</view>
				</view>
			</view>

			<view class="bd5 flex-col"></view>
			<button class="Button93 flex-col" @click="denglu">
				<text class="txt3">确认</text>
			</button>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				codeKey: true,
				codeNum: 60,
				pwd: '',
				mobile: '',
				see: false,
				see1: false,
				goData: {
					code: '',
					account: '',
					password: '',
					pass: '',
				}
			};
		},
		methods: {
			denglu() {
				this.$request('auth/serChangePwd', {
					...this.goData,
					merLogin: '111'
				}, 'POST').then(res => {
					if (res.status == 200) {
						this.list = res.data;
						uni.showToast({
							title: '修改成功'
						})
						setTimeout(e => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				})
			},
			//点击发送验证码
			getCood() {
				console.log('a')
				this.$request('auth/sendSms', {
					phone: this.goData.account,
				}, 'POST').then(res => {
					console.log(res, '登录');
					if (res.status == 200) {
						this.codeKey = false;
						let time = setInterval(() => {
							this.codeNum--;
							if (this.codeNum == 0) {
								this.codeNum = 60;
								clearInterval(time);
								this.codeKey = true;
							}
						}, 1000);
					}
				})
			},
			//输入验证
			inputVerify1(event) {
				var value = event.detail.value.toUpperCase()
				if (!value || value == " ") {
					return ''
				}
				// 数字和字母
				const rule = /[\W]/g
				// 数字和大写字母
				// const rule = /[^0-9A-Za-z]/g
				this.$nextTick(() => {
					this.goData.pass = value.replace(rule, '')
				})
			},
			//输入验证
			inputVerify2(event) {
				var value = event.detail.value.toUpperCase()
				if (!value || value == " ") {
					return ''
				}
				// 数字和字母
				const rule = /[\W]/g
				// 数字和大写字母
				// const rule = /[^0-9A-Za-z]/g
				this.$nextTick(() => {
					this.goData.password = value.replace(rule, '')
				})
			},
		},
	};
</script>
<style>
	@import '../common.css';
</style>

<style>
	.leaner {

		position: absolute;
		top: 0;
		height: 360rpx;
		width: 100%;
		background: linear-gradient(to bottom, #BCFAC8, transparent);

	}

	.page {
		position: relative;
		width: 750rrpx;
		height: 1334rpx;
		overflow: hidden;
	}

	.section1 {
		background-color: rgba(255, 255, 255, 1);
		height: 1334rpx;
		width: 750rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.outer1 {
		width: 750rpx;
		height: auto;
		position: relative;
		z-index: 3;
	}

	.bd1 {
		height: auto;
		/* background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps9bjqqh0dp8lhwxgdysr9y69jhagsrt2k91768e8c8-a7fb-43ee-80f4-bab47fe80450) 100% no-repeat; */
		width: 750rpx;
		padding: 9rpx 0 0 15rpx;
	}

	.section2 {
		width: 723rpx;
		height: auto;
	}

	.section3 {
		width: 720rpx;
		height: 23rpx;
	}

	.img1 {
		width: 67rpx;
		height: 11rpx;
		margin-top: 4rpx;
	}

	.word1 {
		width: 92rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin-left: 14rpx;
		display: block;
	}

	.icon1 {
		width: 25rpx;
		height: 18rpx;
		margin-left: 12rpx;
	}

	.word2 {
		width: 119rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
		margin-left: 90rpx;
		display: block;
	}

	.txt1 {
		width: 63rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: right;
		white-space: nowrap;
		line-height: 24rpx;
		display: block;
		margin: 2rpx 0 0 180rpx;
	}

	.icon2 {
		width: 49rpx;
		height: 19rpx;
		margin-left: 9rpx;
	}

	.section4 {
		width: 393rpx;
		height: 56rpx;
		margin: 24rpx 0 0 330rpx;
	}

	.word3 {
		width: 61rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: MicrosoftYaHei;
		text-align: center;
		white-space: nowrap;
		line-height: 30rpx;
		margin-top: 14rpx;
		display: block;
	}

	.AppletTopBar14 {
		background-color: rgba(0, 0, 0, 0);
		border-radius: 27rpx;
		height: 56rpx;
		border: 1rpx solid rgba(240, 240, 240, 1);
		width: 158rpx;
	}

	.bd2 {
		width: 108rpx;
		height: 30rpx;
	}

	.section5 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 8rpx;
		height: 8rpx;
		margin-top: 12rpx;
	}

	.section6 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 12rpx;
		height: 12rpx;
		margin: 9rpx 0 0 3rpx;
	}

	.section7 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 8rpx;
		height: 8rpx;
		margin: 12rpx 0 0 3rpx;
	}

	.section8 {
		background-color: rgba(240, 240, 240, 1);
		width: 2rpx;
		height: 30rpx;
		margin-left: 19rpx;
	}

	.section9 {
		background-color: rgba(255, 255, 255, 0);
		border-radius: 50%;
		height: 30rpx;
		border: 4rpx solid rgba(255, 255, 255, 1);
		margin-left: 23rpx;
		width: 30rpx;
	}

	.bd3 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
		width: 10rpx;
		height: 10rpx;
	}

	.SingleAvatar56 {
		width: 145rpx;
		height: 136rpx;
		margin: 43rpx 0 0 288rpx;
		position: relative;
		z-index: 3;
	}

	.word4 {
		width: 78rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		display: block;
		margin: 78rpx 0 0 60rpx;
	}

	.yanzhengma {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.yanzhengmaInput {
		width: 200rpx;
	}

	.code999 {
		margin-top: 38rpx;
		margin-right: 60rpx;
		color: #00aaff;
		font-size: 28rpx;
	}

	.codeColor {
		color: #C7C7C7;
	}

	.txt2 {
		width: 400rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		font-size: 28rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		display: block;
		margin: 48rpx 0 0 60rpx;
	}

	.section10 {
		background-color: rgba(238, 238, 238, 1);
		width: 600rpx;
		height: 1rpx;
		margin: 24rpx 0 0 60rpx;
	}

	.info1 {
		width: 51rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		display: block;
		margin: 56rpx 0 0 75rpx;
		margin-top: 0;
	}

	.bd4 {
		width: 599rpx;
		height: 33rpx;
		margin: 48rpx 0 0 56rpx;

	}

	.info2 {
		width: 400rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		font-size: 28rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		display: block;
	}

	.icon3 {
		width: 36rpx;
		height: 26rpx;
		margin-top: 7rpx;
	}

	.bd5 {
		background-color: rgba(238, 238, 238, 1);
		width: 600rpx;
		height: 1rpx;
		margin: 30rpx 0 0 75rpx;
	}

	.Button93 {
		height: 100rpx;
		width: 600rpx;
		height: 100rpx;
		background: linear-gradient(64deg, #2BCCA5, #22B591);
		box-shadow: 0px 4rpx 6rpx 0px rgba(20, 187, 146, 0.4);
		border-radius: 10rpx;

		padding: 35rpx 0 0 267rpx;
		margin-top: 80rpx;
		margin-left: 75rpx;
		box-sizing: border-box;
	}

	.txt3 {
		width: 65rpx;
		height: 31rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: MicrosoftYaHei;
		text-align: left;
		white-space: nowrap;
		line-height: 32rpx;
		display: block;
	}

	.info3 {
		width: 103rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(16, 156, 122, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		text-align: right;
		white-space: nowrap;
		line-height: 26rpx;
		display: block;
		margin: 45rpx 0 0 570rpx;
	}
</style>
